<template>
  <el-dialog class="pick-dialog" title="提号确认" :visible.sync="dialogVisible" :close-on-click-modal="false" width="500px"
    top="30vh">
    <div class="form-box" v-loading="loading">
      <el-descriptions v-if="ruleForm" class="margin-top" title="账号信息" :column="1" :size="'small'" border>
    <!-- <template slot="extra">
      <el-button type="primary" size="small">操作</el-button>
    </template> -->
    <!-- 账号 密码 手机号 售价 密保信息 成本价 重要信息备注 -->
    <el-descriptions-item label="账号">
    {{ ruleForm.accountNumber }}
    </el-descriptions-item>
    <el-descriptions-item label="密码">
    {{ ruleForm.accountPassword }}
    </el-descriptions-item>
    <el-descriptions-item label="手机号">
    {{ ruleForm.securityPhone }}
    </el-descriptions-item>
    <el-descriptions-item label="售价">
    {{ ruleForm.price }}
    </el-descriptions-item>
    <el-descriptions-item label="密保信息">
    {{ ruleForm.securityInfo }}
    </el-descriptions-item>
    <el-descriptions-item label="成本价">
    {{ ruleForm.costPrice }}
    </el-descriptions-item>
    <el-descriptions-item label="重要信息备注">
    {{ ruleForm.importantRemark }}
    </el-descriptions-item>
    <el-descriptions-item label="回收时间">
    {{ ruleForm.recycleTime }}
    </el-descriptions-item>
   
  </el-descriptions>
  <div style="height: 20px;"></div>
  <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="auto">
       
        <el-form-item label="备注" prop="remake">
          <el-input  type="textarea" :rows="5" v-model="ruleForm.remake" placeholder="请输入备注" maxlength="600"
            :show-word-limit="true" />
        </el-form-item>
        
      </el-form>

  <div class="center">
          <el-button @click="close()">取消</el-button>
          <el-button @click="copy()">复制信息</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确认提号</el-button>
        </div>
    </div>
  </el-dialog>
</template>

<script>
import goodsListApi from "../../../api/gameConfig/goodsList";
import ImageCompressor from 'image-compressor.js'
import {formatDate} from "@/utils/index"
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      info: "",
      ruleForm: {},
      loading: false,
      rules:{
        problemTypeName: [
          { required: true, message: "请选择问题类型", trigger: "change" }
        ],
      } 
    };
  },
  methods: {
    open(data) {
      console.log("%c Line:57 🥥 data", "color:#f5ce50", data);
      this.ruleForm = {...data}
      this.dialogVisible = true;
    },
    copy(){
      let now = formatDate(new Date()) 
      // 组装复制数据 商品编号、游戏名称、区服、账号、密码、提号日期（当前时间）
      let copyTxt;
        copyTxt = `商品编号：${this.ruleForm.id}\n游戏名称：${this.ruleForm.gameName}\n区服：${this.ruleForm.systemName ? this.ruleForm.systemName + '/' : ''}${this.ruleForm.carrierName ? this.ruleForm.carrierName  : ''}\n账号：${this.ruleForm.accountNumber||''}\n密码：${this.ruleForm.accountPassword||''}\n提号日期：${now}`;
      this.$copyText(copyTxt).then(
        (e)=> {
          this.$message.success("商品信息已复制到剪切板")
        })
    },
    close() {
      this.resetForm()
      this.dialogVisible = false;
    },
    submitForm() {
      this.copy()
      let obj = {
        id:this.ruleForm.id,
        remake:this.ruleForm.remake
      }
      goodsListApi.salePickUpNew(obj).then(res => {
        this.dialogVisible = false
            this.$modal.msgSuccess(res.msg);
            this.$parent.getList()
          })
    },
  }
};
</script>
<style scoped lang="css">
.center {
  text-align: center;
  margin-top: 15px;
}

.pick-dialog>>>.el-dialog {
  margin-top: 100px !important;
}

.form-box {
  max-height: 800px;
  overflow-y: auto;
}

::v-deep .el-input-number.is-without-controls .el-input__inner {
  text-align: left;
}

.form-box>>>.el-upload-dragger {
  width: 148px;
  height: 148px;
}
</style>
